<template>
    <view class="nav">
		<view :style="{'height':statusBarHeight + 'px','width':'100%'}"></view>
		<view class="nav_menu">
			<image src="/static/img/home/logo.png" @tap="goHome" class="logo"></image>
			<view class="operate">
				<image src="/static/img/home/search.png" @click="jumpSearch()" class="search"></image>
				<image src="/static/img/home/list.png" class="nav_list" @tap="showNav"></image>
			</view>
			<nav-list :style="ispro?'position: absolute;':''" v-if="isShow" :statusBarHeight="statusBarHeight"></nav-list>
		</view>
        
    </view>
</template>

<script>
    import navList from '@/components/navList.vue'
    export default {
        props: {
            txtA: {
                type: String,
                default: function(e) {
                    return ''
                }
            },
			statusBarHeight: {
				type: String,
				default: function(e) {
					return ''
				}
			},
        },
		created() {
		    // #ifdef MP-WEIXIN || APP-PLUS || APP-PLUS-NVUE
			   this.ispro = true;
			// #endif
			// #ifdef H5
			    this.ispro = false;
			// #endif
		},
        data() {
            return {
                isShow:false,
				ispro:true
            }
        },
		components:{
			navList
		},
        methods: {
            iconSearch() {
                uni.navigateTo({
                    url:"/pages/home/search"
                })
            },
            goHome(){
				uni.navigateTo({
				    url:"/pages/home/home"
				})
			},
            iconMsg() {
                uni.navigateTo({
                    url:"/pages/message/message-list"
                })
            },
			jumpSearch(){
				uni.navigateTo({
				    url:"/pages/search/highSearch"
				})
			},
			showNav() {
				this.isShow = !this.isShow
			}
        }
    }
</script>

<style lang="scss">
    .nav {
		position: fixed; 
		top: 0;
		z-index:900;
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: #165E8E;
		
		.nav_menu {
			width: 100%;
			height: 108upx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
		
		.logo {
			width: 343upx;
			height: 91upx;
		}
		
		.operate {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding-right: 30upx;
			
			.search {
				width: 36upx;
				height: 36upx;
				margin-right: 53upx;
			}
			
			.nav_list {
				width: 47upx;
				height: 36upx;
			}
			
		}
	}
	
	
	
	
</style>
